import React, {Component} from 'react';
import {connect} from 'react-redux';
import * as DataName from "../../action/DataNameConfig";
import { setCommonSystemLoading, setCommonDate } from "../../action/Action";
import { EditPasswordUser,SendCodeUser, ForgetPasswordUser, CountDown } from "../../action/ActionUser";
import Util from "../../utils/Util";
import {Form,Modal,Input,Spin,Button,message} from "antd";
const FormItem = Form.Item;

let sendMobile;
/**
 * 忘记密码
 * @export
 * @class ForgetPasswordModal
 * @extends {Component}
 */
class ForgetPasswordModal extends Component {
    constructor(props) {
        super(props);
        this.state={
            type:'text',
            loading:false,
        }
        // 发送验证码
        this.sendCode=()=>{
            let { dispatch, BaseData } = this.props;
            let codeConfig = BaseData[DataName.CODE_CONFIG];
            /*发送验证码*/
            if(codeConfig.sendCodeFlag){
                if(Util.Phone(sendMobile)){
                    dispatch(SendCodeUser({mobile:sendMobile,type:2}))
                }else{
                    message.error("手机号格式不正确");
                }
            }
        }

        this.handleSubmit=(e)=>{
            e.preventDefault();
            let {dispatch} = this.props;
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    dispatch(setCommonSystemLoading(DataName.BASE_SPIN_LOADING,true));
                    dispatch(ForgetPasswordUser(values));
                }
            });
        }

        this.onChangeMobile=(e)=>{
            sendMobile = e.target.value;
        }
        this.enterPass=()=>{
            this.setState({
                type:'password'
            })
        }
        this.onCancel=()=>{
            let {dispatch} = this.props;
            var _this = this;
            setTimeout(function () {
                _this.props.form.setFieldsValue({
                    password:"",verifyCode:""
                })
            },1000);
            dispatch(setCommonSystemLoading(DataName.BASE_MODAL,false));
            dispatch(CountDown(0,"发送验证码"));
        }
    }

    componentWillMount() {
        let {dispatch} = this.props;
        dispatch(setCommonSystemLoading(DataName.BASE_MODAL,false));
        dispatch(setCommonDate("set_base_data",DataName.CODE_CONFIG,{...DataName.CODE_CONFIG_INFO}))
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        let { CommonSystem, BaseData} = this.props;
        let codeConfig = BaseData[DataName.CODE_CONFIG] || {};
        return (
            <Modal
                visible={CommonSystem[DataName.BASE_MODAL] || false}
                title="忘记密码"
                onOk={this.handleSubmit}
                onCancel={this.onCancel}
                width={400}
                style={{top: '35%'}}
                confirmLoading={CommonSystem[DataName.BASE_SPIN_LOADING] || false}
            >
                <Spin spinning={CommonSystem[DataName.BASE_SPIN_LOADING] || false} tip="正在修改">
                    <Form onSubmit={this.handleSubmit} style={{maxWidth: '340px', margin: '0 auto'}}>
                        <FormItem>
                            {getFieldDecorator('mobile', {
                                initialValue: '',
                                rules: [{required: true, message: '请输入手机号', whitespace: true}],
                            })(
                                <Input placeholder="输入手机号" onChange={this.onChangeMobile} />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('verifyCode', {
                                initialValue: '',
                                rules: [{required: true, message: '请输入验证码', whitespace: true}],
                            })(
                                <Input placeholder="验证码" style={{width: '180px', marginRight: '10px'}} />
                            )}
                            <Button type="primary" className={(codeConfig.activeSend || "") + " send_yzm"} style={{width: '150px'}} onClick={this.sendCode}>{codeConfig.send || ""}</Button>
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('password', {
                                initialValue: '',
                                rules: [{required: true, message: '请输入新密码', whitespace: true}],
                            })(
                                <Input type={this.state.type} placeholder="输入新密码" onFocus={this.enterPass} />
                            )}
                        </FormItem>
                    </Form>
                </Spin>
            </Modal>
        );
    }
}
const ForgetPassword = connect(state => ({
    BaseData: state.BaseData,
    CommonSystem: state.CommonSystem
}))(Form.create()(ForgetPasswordModal));

/**
 * 修改密码
 * @export
 * @class EditPasswordModal
 * @extends {Component}
 */
class EditPasswordModal extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit=(e)=>{
            e.preventDefault();
            let {dispatch} = this.props;
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    if(values.password === values.rePassword){
                        dispatch(setCommonSystemLoading(DataName.EDIT_PASSWORD_SPIN,true));
                        dispatch(EditPasswordUser(values))
                    }else{
                        message.info("两次新密码不同");
                    }
                }
            });
        }
        this.onCancel=()=>{
            let {dispatch} = this.props;
            dispatch(setCommonSystemLoading(DataName.EDIT_PASSWORD_MODAL,false));
        }
    }

    componentWillMount() {

    }

    render() {
        const {getFieldDecorator} = this.props.form;
        let { CommonSystem } = this.props;
        return (
            <Modal
                visible={CommonSystem[DataName.EDIT_PASSWORD_MODAL] || false}
                title="修改密码"
                onOk={this.handleSubmit}
                onCancel={this.onCancel}
                width={400}
                style={{top: '35%'}}
                confirmLoading={CommonSystem[DataName.EDIT_PASSWORD_SPIN] || false}
            >
                <Spin spinning={CommonSystem[DataName.EDIT_PASSWORD_SPIN] || false} tip="正在修改">
                    <Form onSubmit={this.handleSubmit} style={{maxWidth: '340px', margin: '0 auto'}}>
                        <FormItem>
                            {getFieldDecorator('oldPassword', {
                                initialValue: '',
                                rules: [{required: true, message: '请输入旧密码', whitespace: true}],
                            })(
                                <Input type="password" placeholder="请输入旧密码" />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('password', {
                                initialValue: '',
                                rules: [{required: true, message: '请输入新密码', whitespace: true}],
                            })(
                                <Input type="password" placeholder="请输入新密码" />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('rePassword', {
                                initialValue: '',
                                rules: [{required: true, message: '请再次输入新密码', whitespace: true}],
                            })(
                                <Input type="password" placeholder="请再次输入新密码" />
                            )}
                        </FormItem>
                    </Form>
                </Spin>
            </Modal>
        );
    }
}
const EditPassword = connect(state => ({
    User: state.User,
    CommonSystem: state.CommonSystem
}))(Form.create({
    mapPropsToFields(props){
        return ({
            oldPassword: Form.createFormField({
                ...props.oldPassword,
                value: ""
            }),
            password: Form.createFormField({
                ...props.password,
                value: ""
            }),
            rePassword: Form.createFormField({
                ...props.rePassword,
                value: ""
            })
        })
    }
})(EditPasswordModal));

export {ForgetPassword,EditPassword}